<template>
  <ul class="wrapper">
    <!-- 遍历 router 菜单数据 -->
    <menu-item
      :key="index"
      v-for="(item, index) in router"
    >
      <!-- 对于没有 children 子菜单的 item -->
      <span
        class="item-title"
        v-if="!item.children"
      >{{item.name}}</span>

      <!-- 对于有 children 子菜单的 item -->
      <template v-else>
        <div >
          <span @click="handleToggleShow">{{item.name}}</span>
          <!-- 递归操作 -->
          <my-menu
            :router="item.children"
            v-if="toggleShow"
          ></my-menu>
        </div>

      </template>
    </menu-item>
  </ul>
</template>
<script>
import MenuItem from "./MenuItem";

export default {
  name: "MyMenu",
  props: ["router"], // Menu 组件接受一个 router 作为菜单数据
  components: { MenuItem },
  data() {
    return {
      toggleShow: false // toggle 状态
    };
  },
  methods: {
    handleToggleShow() {
      // 处理 toggle 状态的是否展开子菜单 handler
      this.toggleShow = !this.toggleShow;
    }
  }
};
</script>
<style scoped>
.wrapper {
  cursor: pointer;
}

.wrapper .item-title {
  font-size: 16px;
}
</style>